<template>
    <div class="user">

        <router-link to="/usercenter">
          <span @mouseover="flow()" @mouseleave="flowout()"><a href=""><i class="iconfont">&#xe616;</i>用户</a></span>
        </router-link>

        <div v-show="show" class="flowout" @mouseover="flow()" @mouseleave="flowout()">

          <router-link to="/usercenter">
            <p><a href=""><i class="iconfont">&#xe652;</i>个人信息</a></p>
          </router-link>
          <router-link to="/like">
            <p><a href="###"><i class="iconfont">&#xe686;</i>我的关注</a></p>
          </router-link>
          <router-link to="/fans">
            <p><a href=""><i class="iconfont">&#xe6cf;</i>我的粉丝</a></p>
          </router-link>
          <router-link to="/collect">
            <p><a href=""><i class="iconfont">&#xe60c;</i>我的收藏</a></p>
          </router-link>
          <router-link to="/myblog">
            <p><a href=""><i class="iconfont">&#xe6af;</i>我的博客</a></p>
          </router-link>
          <router-link to="/myvideo">
            <p><a href=""><i class="iconfont">&#xe64e;</i>我的视频</a></p>
          </router-link>
          <router-link to="/mybook">
            <p><a href=""><i class="iconfont">&#xe777;</i>我的书籍</a></p>
          </router-link>
          
        </div>
    </div>
</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      show:false,
    }
  },

  methods: {
    flow() {
      this.show = true
    },

    flowout() {
      this.show = false
    },

  },

}
</script>

<style lang="stylus" scoped>
.user
  display inline-block
  position fixed
  width 20% 
  margin-left 76%
  margin-bottom 0
  height 4rem 
  //background-color red
  a:hover
    color #FFD700
  span 
    display inline-block
    width 20%
    line-height 2rem
    margin-left 10%
    margin-top 2rem
    text-align center
    // background-color #fff
    .iconfont 
      color #FFD700
  .flowout
    width 40%
    height auto
    font-size .9rem
    border 1px #ccc solid
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    p
    line-height 3rem
    text-align center
    background-color #fff
</style>
